import React,{Component} from "react";
import { inject,observer } from "mobx-react";
import { ListAdvanced,Browser,ListViewPage } from 'weaver-mobile-page';
import { SearchBar,Icon,Popover,List,Button,Modal,Tools} from "weaver-mobile";
import { withRouter,Link} from 'react-router-dom';
import { toJS } from "mobx";

const Item = Popover.Item;
const ListItem = List.Item;
const prompt = Modal.prompt;
const getLabel = Tools.getLabel;
@withRouter
@inject("recDocDetailStore")
@observer
export default class RecDocDetailComponent extends Component{

  prefixCls = "odoc-ledger-detail"

  componentDidMount(){
    const {recDocDetailStore,location} = this.props;
    const receiveId = location.query && location.query.receiveId;
    if(receiveId){
      const identifier = receiveId.split("&&")[0];
      const resendDocId = receiveId.split("&&")[1];
      const receiveCompanyId = receiveId.split("&&")[2];
      recDocDetailStore.setIdentifier(identifier);
      recDocDetailStore.setResendDocId(resendDocId)
      recDocDetailStore.setReceiveCompanyId(receiveCompanyId);
    }
    recDocDetailStore.getData();
  }

  componentWillUnmount(){
    const {recDocDetailStore} = this.props;
    recDocDetailStore.setIdentifier("");
    recDocDetailStore.setReceiveCompanyId("");
    recDocDetailStore.setResendDocId("")
  }

  render(){
    const {recDocDetailStore} = this.props;
    const {list,showCheck,popoverVisible,setPopoverVisible,browser,browseValue,listAd,setShowCheck,resend,repeal} = recDocDetailStore;
    const popover = <Popover 
                      mask = {false}
                      overlayClassName={`${this.prefixCls}-popover`}
                      overlayStyle={{ color: 'currentColor' }}
                      visible={popoverVisible}
                      onVisibleChange={(bool)=> setPopoverVisible(bool)}
                      overlay={[
                        (<Item key="1">{getLabel("388099","批量撤销")}</Item>),                   
                        (<Item key="2"><Link to={browser.path}>{getLabel("388098","发送其他单位")}</Link></Item>),
                      ]}
                      onSelect={(data)=>this.onSelect(data)}
                    >
                      <Icon key="ellipsis" type="ellipsis"  />
                    </Popover>
    return (
      <div className={this.prefixCls}>

        <ListAdvanced
          store={listAd}
          hasAdvanceSerach={false}
          rowKey="id"
          searchKey="requestname"
          dataFetchOptions={{
            url: '/api/offical/sendDoc/getWebAddresseeList',
            method: 'POST',
          }}
          searchBarProps={{
            showExtraButton:true,
            placeholder:getLabel("389960","请输入单位名称"),
            extraButton:[
              { 
                key: 'drop', 
                show: popover,
              }
            ]
          }}
          showCheck={showCheck}
          buttonGroupData={[{
            key: 'submit',
            text: getLabel("826","确定"),
            onClick:  ()=>this.onsubmit(),
             
          }]}
          onSearch={this.onSearch}
          onHideCheck={()=>setShowCheck()}
          getTemplate={()=>this.getTemplate()}
        />


        <Browser
          // label="流程多选"
          store={browser}
          hasAdvanceSerach
          type={142}
          isSingle={false}
          onChange={(ids) => resend(ids)}
          valueArray={browseValue}
        />

      </div>
    )
  }

  getTemplate(){
    const {recDocDetailStore} = this.props ;
    const {repeal} = recDocDetailStore;
    const newTemplate = {
      default: [
        {
          key:"col1",
          configs:[
            {
              key: 'row1',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem extra={`${item.receiveunitname}`}>{getLabel("17728","单位名称")}:</ListItem>
                  </List>
                )     
              },
            },
            {
              key: 'row2',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem extra={item.typespan}>{getLabel("22880","单位类型")}:</ListItem>
                  </List>
                )     
              },
            },
            {
              key: 'row3',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem extra={item.doc_statusspan}>{getLabel("1929","当前状态")}:</ListItem>
                  </List>
                )     
              },
            },
            {
              key: 'row4',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem extra={item.oper_datespan}>{getLabel("26034","处理时间")}:</ListItem>
                  </List>
                )     
              },
            },
            {
              key: 'row5',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem extra={item.response_msgspan}>{getLabel("21662","处理意见")}:</ListItem>
                  </List>
                )     
              },
            },
            {
              key: 'row6',
              render(item) {
                return (
                  <List  className="my-list">
                    <ListItem 
                      extra={ 
                        <div style={{color: '#666'}} onClick={() => prompt(
                          getLabel("388116","请说明撤销理由"),'',
                          text => repeal(text,item.receive_company_id),
                          'text-required',
                        )}>
                          <Icon 
                            type="withdrawal-of-mail" 
                            style={{width: "24px",verticalAlign: "bottom",marginRight: "10px"}} 
                          />
                          {getLabel("23757","撤销")}
                        </div>
                      }
                    >
                    <div className="placeholder"></div>
                    </ListItem>
                  </List>
                )     
              },
            },
          ]
        }
      ],
    };
    return newTemplate;
  }

  onSearch = () => {
    const { listAd,identifier,getListData} = this.props.recDocDetailStore;
    let { searchAdvancedStore, listViewStore, searchParams } = listAd;
    // 搜索框等搜索数据

    // let params = { ...searchParams,documentId:"69e8720c-09ec-41d1-84a9-ecb6f5eece97",};
    let params = { ...searchParams,documentId:identifier,};
    // 清除列表数据
    listViewStore.clearData();
    // 带参数请求列表数据
    listAd.clear();
    getListData({ url: '/api/offical/sendDoc/getWebAddresseeList', method:"POST",params })
  }

  onSelect(data){
    const {setShowCheck,setPopoverVisible} = this.props.recDocDetailStore;
    if(data.key == "1"){
      setShowCheck();
      setPopoverVisible(false)
    }
  }

  onsubmit(){
    const { listAd,repeal,setShowCheck} = this.props.recDocDetailStore;
    const { data } = listAd.selectedListPageStore;
    let companyIds = [];
    for(let i of toJS(data)){
      companyIds.push(i.receive_company_id);
    }
    setShowCheck();
    prompt(
      getLabel("388116","请说明撤销理由"),'',
      text => repeal(text,companyIds.join(",")),
      'text-required',
    )
  }



}